<span class="bg-transparent text-blue-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-blue-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-gray-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-gray-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-red-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-red-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-green-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-green-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-yellow-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-yellow-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-indigo-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-indigo-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-purple-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-purple-500 rounded-full"></span>
    <span>Badge</span>
</span>
<span class="bg-transparent text-pink-500 border border-neutral-300 flex items-center text-xs font-semibold px-2.5 py-0.5 rounded-full">
    <span class="block w-1.5 h-1.5 -ml-0.5 mr-1 bg-pink-500 rounded-full"></span>
    <span>Badge</span>
</span>